 <!-- 业务负责人审核 -->
<template>
    <div id="mainContent">
        <el-card class="box-card" style="margin-right:15px;">
            <el-row class="searchBox">
                <el-form :inline="true" size="small" label-width="100px">
                    <el-form-item label="任务单号：">
                            <el-input size="small" placeholder="任务单号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col :span="1" :offset="23" style="text-align: right;">
                    <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
                </el-col>
            </el-row>
            
            <el-table :data="tableData" :key='tableKey' v-loading="loading" @row-dblclick="looinfo" border stripe height="460">
                <el-table-column type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
                <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false" 
                    :label="getTableHeaderLabel(item)" 
                    :prop="item" 
                    :min-width="getTableColumnWidth(item)" 
                    :fixed="getTableColumnFixed(item)" 
                    :sortable="getTableColumnSort(item)">
                    <template slot-scope="scope">
                        <div v-if="item !== 'operate'">{{scope.row[item]}}</div>
                        <el-button v-if="item === 'operate'" size="small" @click="checkReport" icon="el-icon-edit"></el-button>
                        <el-button v-if="item === 'operate'" type="danger" size="small" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 审核报验单 -->
            <check-reportform :show.sync="showCheckReport"></check-reportform>
             <!--任务单详情 -->
            <info-reportform :show.sync="showInfoBox"></info-reportform>

            <el-row type="flex" justify="center">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"></el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import JtTableColumnFilter from 'components/jt-table-column-filter/index';    // 导入表格列筛选组件
    import CheckReportForm from 'dialog/job-order-manage/check-by-bussinessowner/check-reportform';
    import InforeportForm from 'dialog/job-order-manage/check-by-bussinessowner/info-reportform';
    export default {
        name: 'CheckByBussinessowner',
        components: {
            'jt-table-column-filter': JtTableColumnFilter,
            'check-reportform': CheckReportForm,
            'info-reportform': InforeportForm
        },
        data(){
            return {
                tableData: [{
                    id: "222",
                    natasknameme: "等待审核",
                    status: "等待审核",
                    projectname: "测试",
                    projectcode: "111",
                    resource: "10",
                    operate: "操作"
                }],
                showCheckReport: false,    // 报验单审核
                showInfoBox:false,
                loading: false,
                tableKey: 1,
                filterColumnData: [],
                tableHeaderArr: [{
                    'name': 'id',
                    'alias': '任务单号',
                    'default': true,
                    'width': 270,
                    'fixed': false,
                    'sort': true
                },
                {
                    'name': 'status',
                    'alias': '任务单状态',
                    'default': true,
                    'width': 170,
                    'fixed': false,
                    'sort': true
                },
                {
                    'name': 'resource',
                    'alias': '任务类型',
                    'default': false,
                    'width': 170,
                    'fixed': false,
                    'sort': true
                },
                {
                    'name': 'projectname',
                    'alias': '申请人',
                    'default': true,
                    'width': 170,
                    'fixed': false,
                    'sort': true
                },
                {
                    'name': 'projectcode',
                    'alias': '申请单位',
                    'default': true,
                    'width': 230,
                    'fixed': false,
                    'sort': true
                },
                {
                    'name': 'operate',
                    'alias': '操作',
                    'default': true,
                    'width': 160,
                    'fixed': 'right',
                    'sort': false
                }],
                pageSizeArr: [10, 20, 50],
                pageSize: 10,
                pageTotal: 20,
                currentPage: 1,
            }
        },
        methods: {
            looinfo(row){  //双击某一行
                this.showInfoBox=true;
            },
            formatter(row, column){
                return row.id;
            },
            handleSizeChange(val){
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val){
                // console.log(`当前页: ${val}`);
            },
            // 表头展示
            getTableHeaderLabel(str) {
                return this.getTableSomeValue(str, 'alias');
            },
            // 获取表格列的宽度
            getTableColumnWidth(str){
                return this.getTableSomeValue(str, 'width');
            },
            // 获取表格列是否是固定的
            getTableColumnFixed(str){
                return this.getTableSomeValue(str, 'fixed');
            },
            // 获取表格列是否排序
            getTableColumnSort(str){
                return this.getTableSomeValue(str, 'sort');
            },
            // 获取表格表头，列宽度，列固定，列排序的值
            getTableSomeValue(str, keyName){
                for (var value of this.tableHeaderArr) {
                    if (value['name'] == str) {
                        return value[keyName];
                    }
                }
            },
            // 审核报验单
            checkReport() {
                this.showCheckReport = true;
            }
        }
    }
</script>